<template>
	<view class="content" :style="dataList.length == 0 ? 'background-color: white; height: 100vh' : ''">
		<view class="tagbox">
			<up-tabs :list="[{ name: '进行中' }, { name: '已结束' }]" @click="onChangeTag" :scrollable="false"
				lineColor="#FF872E" :inactiveStyle="{ color: '#606266' }" :activeStyle="{ color: '#000' }"></up-tabs>
			<view class="separatebox"></view>
		</view>
		<view class="nullbox" v-if="dataList.length == 0">
			<image style="width: 100%; height: 60vh;" src="../../static/images/null.png" mode=""></image>
		</view>
		<view v-if="dataList.length != 0" class="cardbox" v-for="(item, index) in dataList" :key="index">
			<view class="top">
				<view class="imagebox">
					<image :src="ASSETS_URL + item.activity_img" alt="" />
				</view>
				<view class="textbox">
					<text class="ellipsis_wrapper">{{ item.activity_name }}</text>
					<view style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
						<text style="font-size: 27rpx;font-weight: normal;">已报名：{{ item.enrollment }}人</text>
						<view class="status" :class="statusClassMap[item.status].className">
							<text>{{ statusClassMap[item.status].text }}</text>
						</view>
					</view>
				</view>

			</view>
			<view class="bottom" v-if="JSON.parse(item.training_info).length > 0">
				<view class="left">
					<view style="display: flex;">
						<up-icon name="map" color="#FF872E" size="20"></up-icon>
						<text style="color: #a6a6a6;" class="_ellipsis_wrapper">{{ item.address }}</text>
					</view>
					<text>{{ JSON.parse(item.training_info)[0].date }}</text>
				</view>
				<text style="color: #FF872E;" @click="navigatorTo(item)">地图导航</text>
			</view>
			<view v-else style="color: gray;">
				暂无培训
			</view>
		</view>
		<view class="footer">
			<text>暂时没有更多了</text>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		getTraining
	} from '../../api/activity';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ASSETS_URL
	} from "../../uitls/global.js"
	let type = ref(true);
	let dataList = ref([])
	//卡片状态map
	const statusClassMap = {
		"0": {
			className: "status_study",
			text: "进行中"
		},
		"1": {
			className: "status_finish",
			text: "已完成"
		},
		"2": {
			className: "status_end",
			text: "已结束"
		},
		"3": {
			className: "status_unKnow",
			text: "未知"
		}
	}

	function navigatorTo(item) {
		if (!item || typeof item.latitude !== 'number' || typeof item.longitude !== 'number') {
			// wx.showToast({
			// 	title: '参数无效，请稍后重试',
			// 	icon: 'none'
			// });
			return;
		}
		wx.openLocation({
			latitude: item.latitude,
			longitude: item.longitude,
			scale: 18, // 缩放级别
			success: function() {
				wx.showToast({
					title: '成功跳转到地图应用',
					icon: 'success'
				});
			},
			fail: function(err) {
				if (err.errMsg === 'openLocation:fail auth deny') {
					wx.showModal({
						title: '授权失败',
						content: '用户拒绝了地图授权，请在小程序设置中开启地图权限',
						showCancel: false
					});
				} else {
					// wx.showToast({
					// 	title: '跳转失败，请稍后重试',
					// 	icon: 'none'
					// });
				}
			}
		});
	}

	function onChangeTag(e) {
		type.value = e.index === 0 ? true : false;
		getData()
	}
	async function getData() {
		const {
			data
		} = await getTraining({
			type: type.value
		})
		// if (!data) {
		// 	uni.showToast({
		// 		title: "出错了，请联系管理员",
		// 		icon:'none'
		// 	})
		// 	return;
		// }
		dataList.value = data.map((el) => {
			const trainInfo = JSON.parse(el.training_info);
			if(trainInfo.length > 0){
				el.address = trainInfo[0].address;
				el.longitude = parseInt(trainInfo[0].longitude);
				el.latitude = parseInt(trainInfo[0].latitude);
			}
			//处理状态
			let targetTime = new Date(el.activity_end_time);
			if (targetTime < Date.now()) {
				el.status = "2"
			} else {
				//算出学习进度
				try {
					let sum = JSON.parse(el.videos_process).reduce((a, b) => a + b, 0);
					if (sum < el.videos_length) {
						el.status = "0"
					} else {
						el.status = "1"
					}
				} catch (e) {
					el.status = "0"
				}
			}
			return el;
		});
	}

	onShow(async () => {
		getData();
	})
</script>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>
<style lang="scss">
	.tagbox {
		padding: 5px 0 0 0;
		background-color: white;
		position: relative;

		.separatebox {
			position: absolute;
			top: 10px;
			left: 50%;
			width: 1px;
			height: 30px;
			background-color: #c4c4c4;
			display: flex;
			flex-direction: column;
		}
	}

	.cardbox {
		margin: 10px 10px 0 10px;
		padding: 10px 10px 10px 10px;
		border-radius: 10px;
		background-color: white;

		.top {
			display: flex;
			border-bottom: #cacaca solid 1px;
			padding-bottom: 15px;
			gap: 10px;

			.imagebox {
				width: 80px;
				height: 80px;
				border-radius: 10px;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}

			}

			.textbox {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;

				text:nth-child(1) {
					font-weight: bold;
					font-size: 16px;
				}

				text:nth-child(2) {
					color: #989898;
					font-size: 14px;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 8px 0;

			.left {
				max-width: 80%;
				display: flex;
				flex-direction: column;
				gap: 5px;
				justify-content: space-between;
			}

			text {
				font-size: 16px;
			}
		}
	}

	.footer {
		text-align: center;
		padding: 20px;
		color: #a6a6a6;
	}


	.status {
		padding: 10rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		height: fit-content;
		margin-left: auto;
	}

	.status_study {
		background-color: #46ab1e;
		color: white;
	}

	.status_finish {
		background-color: #2ecbff;
		color: white;
	}

	.status_end {
		background-color: #cbb8b8;
		color: black;
	}

	.status_unKnow {
		background-color: yellow;
		color: white;
	}

	.ellipsis_wrapper {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>